<template>
	<div class="page">
		<global-header title="机器人列表" @back="$router.back()">
			<template #right>
				<div @click="handleAddRobot" class="row-start-center mr-[2px] text-[12px] relative right-[10px]">
					<img :src="addImg" class="w-[12px] h-[12px] mr-[2px]" alt="">
					<div>添加机器人</div>
				</div>
			</template>
		</global-header>
		<main class="page-main">
			<div class="h-[60px] bg-white">
				<van-search @search="handleSearch" @clear="handleSearch" @click-left-icon="handleSearch"
					v-model="searchParams.Name" placeholder="请输入玩家用户名/昵称/备注" shape="round" />
			</div>
			<div class="row-between-center bg-white h-[40px] px-[15px] py-[8px] mt-[10px]">
				<div class="row-start-center">
					<div class="text-[#333] text-[14px] mr-[10px]">状态</div>
					<van-switch :model-value="openStatus" @update:model-value="handleStatusChange"></van-switch>
				</div>
				<div class="row-start-center">
					<div class="text-[#333] text-[14px] mr-[10px]">随游戏启停</div>
					<van-switch></van-switch>
				</div>
			</div>
			<div class="bg-white mt-[10px]">
				<!-- 表格部分 -->
				<!-- 表头 -->
				<div class="row-start-center text-[14px] text-[#888] pt-[12px] pb-[10px]  px-[15px]"
					style="border-bottom: 1px solid #E4E4E4;">
					<div class="w-[30%]">用户名</div>
					<div class="w-[25%]">余额</div>
					<div class="w-[25%]">账号状态</div>
					<div class="w-[20%]">操作</div>
				</div>
				<!-- 表内容 -->
				<div class="page-main overflow-y-auto" ref="scrollRef">
					<div class="bg-white px-[15px]">
						<scroll-list emptyImage v-model:loading="state.loading" v-model:refresh="state.refresh"
							:finished="state.finished" :length="list.length" @load="load">
							<template v-for="(item, index) in list">
								<RobotItem :item="item" :last="index >= list.length - 2" @more="() => handleMore(item)"
									@status="() => handleStatus(item)">
								</RobotItem>
							</template>
						</scroll-list>
					</div>
				</div>
			</div>
		</main>
	</div>
	<RobotMorePopup ref="robotMorePopupRef" :info="robotInfo" @update-data="refresh" />
	<RobotStatusPopup ref="robotStatusPopupRef" :uid="robotInfo?.Id || null" @update="handleUpdate" />
</template>
<route>
  {
    name: "admin-user-robot",
    meta: {
      pageIndex: 3,
    }
  }
</route>
<script setup lang="ts">
import RobotItem from "./components/robot/robot-item.vue"
import RobotMorePopup from "./components/robot/robot-more-popup.vue";
import RobotStatusPopup from "./components/robot/robot-status.popup.vue";
import { useList } from "@/hooks/useList";
import { showConfirmDialog } from 'vant';
import addImg from '@/assets/images/add.png'
import { showToast } from 'vant';
import { reqRobotAllStatus, reqRobotList } from '@/api/user'
import { cloneDeep, debounce } from "lodash-es";
interface Params {
	Name?: string;
}
const robotMorePopupRef = ref()
const robotStatusPopupRef = ref()
const robotInfo = ref<RobotMo | null>(null)

const openStatus = ref(false)


const searchParams = reactive({
	Name: ''
})


const getParams = () => {
	const params = {
		Name: ''
	}
	if (searchParams.Name) {
		params.Name = searchParams.Name
	}
	return params
}
// 获取列表
const { scrollRef, state, list, getData, search, load, refresh } = useList<RobotMo, Params>(
	reqRobotList,
	getParams
);

const handleSearch = debounce(() => {
	search();
}, 500);


onMounted(() => {
	getData()
})

function handleMore(item: RobotMo) {
	robotInfo.value = item
	nextTick(() => {
		robotMorePopupRef.value?.open()
	})
}

function handleStatus(item: RobotMo) {
	robotInfo.value = item
	nextTick(() => {
		robotStatusPopupRef.value?.open()
	})
}

function handleStatusChange(val: Number) {
	console.log(val, 'val')
	showConfirmDialog({
		title: '提醒',
		message: `是否【${val ? '开启' : '关闭'}】所有机器人`
	}).then(() => {
		const robStatus = val ? 1 : 0
		reqRobotAllStatus(robStatus).then(() => {
			showToast(`全部${val ? '开启' : '关闭'}成功`)
			openStatus.value = val ? true : false
			getData()
		})
	})
}

function handleAddRobot(item: RobotMo) {
	nextTick(() => {
		robotMorePopupRef.value?.add()
	})
}

function handleUpdate(uid: number, status: number) {
	const arr = cloneDeep(list.value);
	arr.forEach(jtem => {
		if (jtem.Id == uid) {
			jtem.Status = status;
		}
	});
	list.value = cloneDeep(arr);
}
</script>

<style scoped>
.action-sheet {
	position: fixed;
	right: 20px;
	top: 100px;
	background-color: #fff;
	padding: 0 20px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
</style>
